import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Select from '../../ch/components/Select.vue'

<Meta
  title="Components/Form/Select"
  component={Select}
  argTypes={{
    variant: {
      control: {
        type: 'select',
        options: ['outline', 'negative'],
      },
    },
    required:   { control: { type: 'boolean' } },
    bare: {},
    size: { control: { type: 'select', options: ['sm', 'base', 'lg'] } },
    label: {},
    hideLabel:   { control: { type: 'boolean' } },
    message: {},
    messageType: {
      control: {
        type: 'select',
        options: ['error', 'warning', 'success', 'info'],
      },
    }
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Select },
  template: `
    <Select
      :variant="variant"
      :bare="bare"
      :size="size"
      :label="label"
      :hideLabel="hideLabel"
      :id="id"
      :name="name"
      :message="message"
      :messageType="messageType"
      :required="required"
    >
      <option disabled selected>Choose your country</option>
      <option>Switzerland</option>
      <option>Swaziland</option>
      <option>Sweden</option>
    </Select>
  `,
})

# Select

## Example

<Canvas>
  <Story
    name="Example"
    args={{
      variant: 'outline',
      bare: false,
      size: 'base',
      label: 'Label',
      hideLabel: false,
      name: 'select-name',
      id:'select-id'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Select negative type

- `input--negative` for standard textareas on dark background

<Canvas style={{ backgroundColor: '#2f4356' }}>
  <div class="select">
    <select
      id="select-id"
      name="select-name"
      class="input--outline input--base input--negative"
    >
      <option>Choose your country</option>
      <option>Switzerland</option>
      <option>Swaziland</option>
      <option>Sweden</option>
    </select>
    <div class="select__icon">
      <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
        ></path>
      </svg>
    </div>
  </div>
</Canvas>

## Select disabled state

- `input--disabled` or `disabled state on the input` to add the disabled style

<Canvas>
  <div class="select">
    <select
      id="select-id"
      name="select-name"
      class="input--outline input--base input--disabled"
    >
      <option>Choose your country</option>
      <option>Switzerland</option>
      <option>Swaziland</option>
      <option>Sweden</option>
    </select>
    <div class="select__icon">
      <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
        ></path>
      </svg>
    </div>
  </div>
</Canvas>

## Sizes

For size variations, the following css classes are built:

- `input--sm` for small inputs
- `input--base` for standard size
- `input--lg` for large inputs

<Canvas>
  <div class="select">
    <select
      id="select-0"
      name="select-name"
      class="input--outline input--sm"
    >
      <option>Small</option>
    </select>
    <div class="select__icon">
      <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
        ></path>
      </svg>
    </div>
  </div>
</Canvas>

<Canvas>
  <div class="select">
    <select
      id="select-0"
      name="select-name"
      class="input--outline input--base"
    >
      <option>Default</option>
    </select>
    <div class="select__icon">
      <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
        ></path>
      </svg>
    </div>
  </div>
</Canvas>

<Canvas>
  <div class="select">
    <select
      id="select-0"
      name="select-name"
      class="input--outline input--lg"
    >
      <option>Large</option>
    </select>
    <div class="select__icon">
      <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
        ></path>
      </svg>
    </div>
  </div>
</Canvas>


## Required select

If the select is mandatory:
- a `required` attribute is added to the input element
- an asterisk is displayed right after the label. This can be done by adding a `text--asterisk` class on the label element:

<Canvas>
<div class="form__group__select">
  <label for="select-id" class="text--base text--asterisk">
    Label
  </label>
  <div class="select">
    <select
      id="select-id"
      name="select-name"
      class="input--outline input--base"
    >
      <option disabled="disabled" selected="selected">
        Choose your country
      </option>
      <option>Switzerland</option>
      <option>Swaziland</option>
      <option>Sweden</option>
    </select>
    <div class="select__icon">
      <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
        ></path>
      </svg>
    </div>
  </div>
</div>
</Canvas>

## Messages

If the select has error, an `input--error` class is added to the input element. Additionally
a `badge badge--sm badge--error` element wraps the error message, right after the input element:

<Canvas>
<div class="form__group__select">
  <label for="select-id" class="text--base text--asterisk">
    Label
  </label>
  <div class="select">
    <select
      id="select-id"
      name="select-name"
      class="input--outline input--base input--error"
    >
      <option disabled="disabled" selected="selected">
        Choose your country
      </option>
      <option>Switzerland</option>
      <option>Swaziland</option>
      <option>Sweden</option>
    </select>
    <div class="select__icon">
      <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
        <path
          d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
        ></path>
      </svg>
    </div>
  </div>
  <div class="badge badge--sm badge--error">
    This field is required
  </div>
</div>
</Canvas>
